<template>
  <div class="test-federation">
    <h2>模块联邦测试</h2>
    <el-button @click="testFederationLoad" type="primary">测试联邦加载</el-button>
    <div v-if="result">
      <h3>测试结果：</h3>
      <pre>{{ result }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const result = ref('');

const testFederationLoad = async () => {
  try {
    result.value = '开始联邦加载测试...\n';
    
    // 测试正确的模块联邦调用方式
    // @ts-ignore
    const taskModule = await import('taskModule/main');
    result.value += `联邦加载成功: ${typeof taskModule}\n`;
    result.value += `模块结构: ${JSON.stringify(Object.keys(taskModule), null, 2)}\n`;
    
    // 检查具体导出
    result.value += `default: ${typeof taskModule.default}\n`;
    result.value += `createTaskModule: ${typeof taskModule.createTaskModule}\n`;
    result.value += `TaskForm: ${typeof taskModule.TaskForm}\n`;
    
    // 尝试创建实例
    if (taskModule.createTaskModule) {
      const mockSendCmd = () => ({ code: 200, msg: 'mock', data: null });
      const instance = taskModule.createTaskModule(mockSendCmd, {});
      result.value += `✅ 实例创建成功: ${typeof instance}\n`;
      result.value += `实例方法: ${Object.getOwnPropertyNames(instance)}\n`;
    }
    
  } catch (error) {
    result.value += `❌ 错误: ${error}\n`;
    console.error('联邦加载错误:', error);
  }
};
</script>

<style scoped>
.test-federation {
  padding: 20px;
}
pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
  overflow-y: auto;
}
</style>